<template>
	<view class="column-css">
		<view style="width: 100%; height: 20rpx;background: #f6f6f6;"></view>
		<uni-steps
			style="padding: 20rpx 0;"
			activeColor="#FB8536"
			:options="[{ nodeName: '上传证件' }, { nodeName: '补全个人资料' }, { nodeName: '开卡完成' }]"
			:active="1"
		></uni-steps>
		<view><text style="margin-left: 40rpx;color: #C8C7CC;">请填写您的个人信息</text></view>
		<view class="row-css view-centen-text" style="margin: 0 30rpx;">
			<view style="width: 180rpx;">姓名</view>
			<view>
				<form><input disabled="true" v-model="accountInfo.trueName" /></form>
			</view>
		</view>
		<view class="row-css view-centen-text" style="margin: 0 30rpx;">
			<view style="width: 180rpx;">证件号</view>
			<view>
				<form><input disabled="true" v-model="accountInfo.idNo" /></form>
			</view>
		</view>
		<view class="row-css view-centen-text" style="margin: 0 30rpx;">
			<view style="width: 180rpx;">职业</view>
			<picker style="flex: 1;" @change="bindPickerChange" :value="index" :range="array" range-key="dicValue">
				<view>{{ array[index].dicValue }}</view>
			</picker>
		</view>
		<view class="row-css view-centen-text" style="margin: 0 30rpx;">
			<view style="width: 180rpx;">家庭住址</view>
			<view>
				<form><input v-model="accountInfo.homeAddress" /></form>
			</view>
		</view>
		<view style="width: 100%;padding: 20rpx 30rpx;font-size: 24rpx; background: #f6f6f6;color: #E04B28;">基于监管要求,若以上住址不是您的经常居住地址，请手动修改</view>
		<view class="row-css view-centen-text" style="margin: 0 30rpx;">
			<view style="width: 180rpx;">卡号</view>
			<view class="row-css" style="flex: 1;">
				<view style="flex: 1;">
					<form><input v-model="accountInfo.bindCardNo" placeholder="请输入完整银行卡号" @input="onbindcard" /></form>
				</view>
				<view style="display: flex; align-items: center;" @tap="chooseImage()">
					<image style="width: 38rpx;height: 33rpx;margin-left: 10rpx;" mode="aspectFit" src="../../static/icon_certification.png"></image>
				</view>
			</view>
		</view>
		<view style="padding: 20rpx 30rpx;font-size: 24rpx; background: #f6f6f6;color: #007AFF;text-align: right;" @click="blanil">查看支持银行列表</view>

		<view class="row-css view-centen-text" style="margin: 0 30rpx;">
			<view style="width: 180rpx;">手机号</view>
			<view>
				<form><input v-model="accountInfo.mobileNo" placeholder="输入实体卡预留手机号" /></form>
			</view>
		</view>

		<view class="row-css view-centen-text" style="margin: 0 30rpx;">
			<view style="width: 180rpx;">验证码</view>
			<form>
				<div class="row-css" style="align-items: center;justify-content: space-between;">
					<input style="width: 48%;" type="phone" maxlength="6" onkeyup="this.value=this.value.replace(/\D/g,'')" placeholder="请输入验证码" v-model="accountInfo.otpValue" />
					<view style="font-size: 14px;color: #007AFF;width: 50%;text-align: right;" @click="time == '60'?sendcode():''">{{ codeText }}</view>
				</div>
			</form>
		</view>
		<view class="row-css" style="margin-top: 20rpx;margin-left: 30rpx; align-items: center;">
			<checkbox :checked="ischeckbox1" style="transform:scale(0.7)" @click="checkbox(1)"></checkbox>
			<view style="font-size: 24rpx;color: #AAAAAA;">
				我已阅读并同意
				<text style="color: #007AFF;" @click="onpeotocol(1)">《平安银行电子II、III类户服务协议》</text>
			</view>
		</view>
		<view class="row-css" style="margin-top: 10rpx;margin-left: 30rpx; align-items: center;">
			<checkbox :checked="ischeckbox2" style="transform:scale(0.7)" @click="checkbox(2)"></checkbox>
			<view style="font-size: 24rpx;color: #AAAAAA;">
				我已阅读并同意
				<text style="color: #007AFF;" @click="onpeotocol(2)">《授权条款》</text>
			</view>
		</view>

		<view class="row-css" style="width: 100%;margin: 60rpx 0;">
			<button class="mini-btn" style="background: #FB8536;" type="primary" size="default" @click="onNext()">下一步</button>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="column-css" style="background: #FFFFFF;width: 500rpx;padding-bottom: 20rpx; border-radius: 15rpx;">
				<view style="padding: 20rpx;">支持银行列表</view>
				<view style="padding: 0 40rpx;max-height: 900rpx;overflow: auto;">
					<scroll-view style="max-height: 900rpx;" :scroll-y="true" :show-scrollbar="true">
						<block v-for="(item, index) in banklist" :key="index">
							<view class="row-css" style="align-items: center;padding: 10rpx 0;">
								<image style="width: 50rpx;height: 50rpx;padding-right: 40rpx;" mode="aspectFit" :src="item.dicValue"></image>
								<view style="padding: 10rpx 0;">{{ item.dicName }}</view>
							</view>
							<view class="line-veiw"></view>
						</block>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import debounce from '@/common/debounce.js'
export default {
	data() {
		return {
			accountInfo: {
				businessNo: '',
				imageOrderNo: '',
				mobileNo: '',
				bindCardNo: '',
				bankName: '',
				lbs: '',
				deviceID: '',
				fullDeviceNumber: '',
				appName: '',
				idNo: '',
				trueName: '',
				otpOrderNo: '',
				otpValue: '',
				occupation: '40200',
				clientIP: '',
				homeAddress: ''
			},
			iscertifide: false,
			time: 60,
			userid: '',
			codeText: '获取验证码',
			ischeckbox1: false,
			ischeckbox2: false,
			peopleimage: '../../static/icon_people.png',
			guohuiimage: '../../static/icon_guohui.png',
			banklist: [{ bankname: '招商' }, { bankname: '中国' }],
			index: 0,
			array: [
				{
					dicName: '40200',
					dicValue: '交通运输、仓储和邮政业服务人员'
				},
				{
					dicName: '10100',
					dicValue: '中国共产党机关负责人'
				},
				{
					dicName: '10200',
					dicValue: '国家机关负责人'
				},
				{
					dicName: '10300',
					dicValue: '民主党派和工商联负责人'
				},
				{
					dicName: '10400',
					dicValue: '人民团体和群众团体、社会组织及其他成员组织负责人'
				},
				{
					dicName: '10500',
					dicValue: '基层群众自治组织负责人'
				},
				{
					dicName: '10600',
					dicValue: '企事业单位负责人'
				},
				{
					dicName: '10700',
					dicValue: '个体工商户'
				},
				{
					dicName: '20100',
					dicValue: '科学研究人员'
				},
				{
					dicName: '20200',
					dicValue: '工程技术人员'
				},
				{
					dicName: '20300',
					dicValue: '农业技术人员'
				},
				{
					dicName: '20400',
					dicValue: '飞机和船舶技术人员'
				},
				{
					dicName: '20500',
					dicValue: '卫生专业技术人员'
				},
				{
					dicName: '20600',
					dicValue: '经济和金融专业人员'
				},
				{
					dicName: '20700',
					dicValue: '法律、社会和宗教专业人员'
				},
				{
					dicName: '20800',
					dicValue: '教学人员'
				},
				{
					dicName: '20900',
					dicValue: '文学艺术、体育专业人员'
				},
				{
					dicName: '21000',
					dicValue: '新闻出版、文化专业人员'
				},
				{
					dicName: '30200',
					dicValue: '安全和消防人员'
				},
				{
					dicName: '30300',
					dicValue: '行政单位办事人员'
				},
				{
					dicName: '40100',
					dicValue: '批发与零售服务人员'
				},
				{
					dicName: '40300',
					dicValue: '住宿和餐饮服务人员'
				},
				{
					dicName: '40400',
					dicValue: '信息运输、软件和信息技术服务人员'
				},
				{
					dicName: '40500',
					dicValue: '金融服务人员'
				},
				{
					dicName: '40600',
					dicValue: '房地产服务人员'
				},
				{
					dicName: '40700',
					dicValue: '租赁和商务服务人员'
				},
				{
					dicName: '40800',
					dicValue: '技术辅助服务人员'
				},
				{
					dicName: '40900',
					dicValue: '水利、环境和公共设施管理服务人员'
				},
				{
					dicName: '41000',
					dicValue: '居民服务人员'
				},
				{
					dicName: '41100',
					dicValue: '电力、燃气及水供应服务人员'
				},
				{
					dicName: '41200',
					dicValue: '修理及制作服务人员'
				},
				{
					dicName: '41300',
					dicValue: '文化、体育及娱乐服务人员'
				},
				{
					dicName: '41400',
					dicValue: '健康服务人员'
				},
				{
					dicName: '50100',
					dicValue: '农业生产人员'
				},
				{
					dicName: '50200',
					dicValue: '林业生产人员'
				},
				{
					dicName: '50300',
					dicValue: '畜牧业生产人员'
				},
				{
					dicName: '50400',
					dicValue: '渔业生产人员'
				},
				{
					dicName: '50500',
					dicValue: '农林牧渔生产辅助人员'
				},
				{
					dicName: '60100',
					dicValue: '农副产品加工人员'
				},
				{
					dicName: '60200',
					dicValue: '食品、饮料生产加工人员'
				},
				{
					dicName: '60300',
					dicValue: '烟草及其制品加工人员'
				},
				{
					dicName: '60400',
					dicValue: '纺织、针织、印染人员'
				},
				{
					dicName: '60500',
					dicValue: '纺织品、服装和皮革、毛皮制品加工制作人员'
				},
				{
					dicName: '60600',
					dicValue: '木材加工、家具与木制品制作人员'
				},
				{
					dicName: '60700',
					dicValue: '纸及纸制品生产加工人员'
				},
				{
					dicName: '60800',
					dicValue: '印刷和记录媒介复制人员'
				},
				{
					dicName: '60900',
					dicValue: '文教、工美、体育和娱乐用品制作人员'
				},
				{
					dicName: '61000',
					dicValue: '石油加工和炼焦、煤化工制作人员'
				},
				{
					dicName: '61100',
					dicValue: '化学原料和化学制品制造人员'
				},
				{
					dicName: '61200',
					dicValue: '医药制造人员'
				},
				{
					dicName: '61300',
					dicValue: '化学纤维制造人员'
				},
				{
					dicName: '61400',
					dicValue: '橡胶和塑料制品制造人员'
				},
				{
					dicName: '61500',
					dicValue: '非金属矿物制品制造人员'
				},
				{
					dicName: '61600',
					dicValue: '采矿人员'
				},
				{
					dicName: '61700',
					dicValue: '金属冶炼和压延加工人员'
				},
				{
					dicName: '61800',
					dicValue: '机械制造基础加工人员'
				},
				{
					dicName: '61900',
					dicValue: '金属制品制造人员'
				},
				{
					dicName: '62000',
					dicValue: '通用设备制造人员'
				},
				{
					dicName: '62100',
					dicValue: '专用设备制造人员'
				},
				{
					dicName: '62200',
					dicValue: '汽车制造人员'
				},
				{
					dicName: '62300',
					dicValue: '铁路、船舶、航空设备制造人员'
				},
				{
					dicName: '62400',
					dicValue: '电气机械和器材制造人员'
				},
				{
					dicName: '62500',
					dicValue: '计算机、通信和其他电子设备制造人员'
				},
				{
					dicName: '62600',
					dicValue: '仪器仪表制造人员'
				},
				{
					dicName: '62700',
					dicValue: '废弃资源综合利用人员'
				},
				{
					dicName: '62800',
					dicValue: '电力、热力、气体、水生产和输配人员'
				},
				{
					dicName: '62900',
					dicValue: '建筑施工人员'
				},
				{
					dicName: '63000',
					dicValue: '运输设备和通用工程机械操作人员及有关人员'
				},
				{
					dicName: '63100',
					dicValue: '生产辅助人员'
				},
				{
					dicName: '70000',
					dicValue: '军人'
				},
				{
					dicName: '80000',
					dicValue: '不便分类的其他从业人员'
				},
				{
					dicName: '90100',
					dicValue: '学龄前儿童/学生'
				},
				{
					dicName: '90200',
					dicValue: '家庭主妇'
				},
				{
					dicName: '90300',
					dicValue: '失业或无业'
				},
				{
					dicName: '90400',
					dicValue: '离退休人员'
				},
				{
					dicName: '90500',
					dicValue: '自由职业者'
				}
			]
		};
	},
	onLoad(options) {
		this.accountInfo.trueName = options.trueName;
		this.accountInfo.idNo = options.idNo;
		this.accountInfo.imageOrderNo = options.imageOrderNo;
		this.accountInfo.homeAddress = options.address;
		this.userableBank();
		let that = this;
		// uni.request({
		// 	// 获取ip
		// 	url: 'https://pv.sohu.com/cityjson?ie=utf-8',
		// 	success(res) {
		// 		console.log('res =>', res);
		// 		var m = JSON.parse(res.data.match(/.*(\{[^\}]+\}).*/)[1] || '{}');
		// 		that.accountInfo.clientIP = m.cip;
		// 		console.log('ip =>', m.cip, res);
		// 	}
		// });
		this.wxRequest({
			// 获取ip
			url: `${this.API}/driverService/getIp`,
			success(res) {
				that.accountInfo.clientIP = res.data.data.ip
			}
		});
		uni.getLocation({
			type: 'wgs84',
			success: function(res) {
				// that.accountInfo.lbs = res.longitude + '/' + res.latitude;
				that.accountInfo.lbs = (res.longitude+'').substring(0,(res.longitude+'').indexOf(".")+3) + '/' + (res.latitude+'').substring(0,(res.latitude+'').indexOf(".")+3);
			}
		});

		that.accountInfo.deviceID = uni.getSystemInfoSync().deviceId;
		that.accountInfo.fullDeviceNumber = '+' + uni.getStorageSync(this.DATA_KEY.userInfo).mobile;
		that.accountInfo.appName = uni.getSystemInfoSync().brand;
	},
	methods: {
		checkbox: function(index) {
			if (index == 1) {
				this.ischeckbox1 = !this.ischeckbox1;
			} else {
				this.ischeckbox2 = !this.ischeckbox2;
			}
		},
		onpeotocol: function(index) {
			uni.navigateTo({
				url: '../personal/protocol?index=' + index
			});
		},
		blanil: function() {
			this.$refs.popup.open('center');
		},
		onbindcard: function(event) {
			console.log('ddd========识别 ', event.target.value);
			let val = event.target.value.toString()
			val = val.replace(/\s*/g,"")
			if(!/^\d+$/.test(val)){
				uni.showToast({
					title: '银行卡号格式不正确',
					icon: 'none'
				});
				return
			}
			this.$nextTick(() => {
				this.accountInfo.bindCardNo = val
				if (val.toString().length == 16 || val.toString().length == 19  || val.toString().length == 17) {
					this.wxRequest({
						url: `${this.API}/mini/erLeiHu/getBankByCardNo`,
						method: 'POST',
						data: {
							cardNo: this.accountInfo.bindCardNo
						},
						title: '银行卡识别中...',
						success: res => {
							this.accountInfo.bindCardNo = res.data.data[0].cardNo;
							this.accountInfo.bankName = res.data.data[0].bankName;
						}
					});
				}
			})
			
		},
		bindPickerChange: function(e) {
			console.log('dd===========>', e);
			console.log('dd===========>', e.target.value);
			console.log('dd===========>', this.array[this.index]);
			this.index = e.target.value;
			this.accountInfo.occupation = this.array[this.index].dicName;
			// switch (this.index) {
			// 	case '0':
			// 		uni.navigateTo({
			// 			url: `../personal/uploadcar`
			// 		});
			// 		break;
			// 	case '1':
			// 		uni.navigateTo({
			// 			url: `../personal/paymentinformation`
			// 		});
			// 		break;
			// }
			// this.license.axle = this.array[this.index].dicName;
		},
		userableBank: function() {
			this.wxRequest({
				url: `${this.API}/driverService/queryDic`,
				method: 'POST',
				data: ['USEABLE_BANK'],
				success: res => {
					this.banklist = res.data.data.USEABLE_BANK;
				}
			});
		},
		chooseImage: function() {
			// TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
			uni.chooseImage({
				count: 1,
				sizeType:'compressed',
				success: res => {
					console.log('dddd:', res);
					uni.showLoading({
						title: '上传中'
					});
					// uni.getFileInfo({
					// 	filePath : res.tempFilePaths[0],
					// 	digestAlgorithm: "md5",
					// 	success: function (res) {
					// 		console.log("dddd MD5  ", res);
					// 	}
					// });
					uni.uploadFile({
						url: `${this.API}/mini/erLeiHu/ocrBankCard`,
						fileType: 'image',
						name: 'file',
						filePath: res.tempFilePaths[0],
						file: res.tempFiles,
						header: {
							'Content-Type': 'multipart/form-data;boundary=ebf9f03029db4c2799ae16b5428b06bds',
							Authorization: uni.getStorageSync(this.DATA_KEY.token)
						},
						formData: {
							fileType: '2',
							mobile: this.mobileNo,
							fileId: Math.floor(Math.random() * 1259),
							ocrOrNot: '1',
							orderId: ''
						},
						success: res => {
							uni.hideLoading();
							this.accountInfo.bindCardNo = JSON.parse(res.data).data[0].cardNo;
							this.accountInfo.bankName = JSON.parse(res.data).data[0].bankName;
						},
						fail: error => {
							uni.showToast({
								title: '文件上传失败',
								icon: 'none'
							});
						}
					});
				}
			});
		},
		onNext() {
			let that = this;
			// uni.request({
			// 	// 获取ip
			// 	url: 'https://pv.sohu.com/cityjson?ie=utf-8',
			// 	success(res) {
			// 		console.log('res =>', res);
			// 		var m = JSON.parse(res.data.match(/.*(\{[^\}]+\}).*/)[1] || '{}');
			// 		that.accountInfo.clientIP = m.cip;
			// 		console.log('ip =>', m.cip, res);
			// 	}
			// });
			// that.wxRequest({
			// 	// 获取ip
			// 	url: `${that.API}/driverService/getIp`,
			// 	success(res) {
			// 		that.accountInfo.clientIP = res.data.data.ip
			// 	}
			// });
			// //获取当前的地理位置
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					// console.log(res,"位置")
					that.accountInfo.lbs = (res.longitude+'').substring(0,(res.longitude+'').indexOf(".")+3) + '/' + (res.latitude+'').substring(0,(res.latitude+'').indexOf(".")+3);
				}
			});
         
			var reg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/;
			if (this.ischeckbox1 && this.ischeckbox2) {
				if (this.accountInfo.businessNo == '') {
					uni.showToast({
						title: '请获取验证码后进行操作！',
						icon: 'none'
					});
					return;
				}
				if (this.accountInfo.mobileNo == '') {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					});
					return;
				} else if (!reg.test(this.accountInfo.mobileNo)) {
					uni.showToast({
						title: '手机格式不正确',
						icon: 'none'
					});
					return;
				}
				if (this.accountInfo.bindCardNo == '' || this.accountInfo.bankName == '') {
					uni.showToast({
						title: '请输入银行卡号并获取银行名！',
						icon: 'none'
					});
					return;
				}
				if (this.accountInfo.lbs == '') {
					uni.showToast({
						title: '请打开位置！',
						icon: 'none'
					});
					return;
				}
				if (this.accountInfo.otpValue == '') {
					uni.showToast({
						title: '请输入验证码！',
						icon: 'none'
					});
					return;
				}
				if(!this.accountInfo.clientIP){
					this.wxRequest({
						// 获取ip
						url: `${this.API}/driverService/getIp`,
						success(res) {
							that.accountInfo.clientIP = res.data.data.ip
						}
					});
				}
				
				// that.wxRequest({
				// 	url: `${that.API}/mini/erLeiHu/checkUserInfo`,
				// 	method: 'POST',
				// 	data: that.accountInfo,
				// 	title: '校验中...',
				// 	success: res => {}
				// });
				debounce(this.postOpen, 1000, true)
				// that.wxRequest({
				// 	url: `${that.API}/mini/erLeiHu/openAccount`,
				// 	method: 'POST',
				// 	data: that.accountInfo,
				// 	title: '开户中...',
				// 	success: res => {
				// 		console.log('==============开户成功',res);
				// 			uni.navigateTo({
				// 				url:
				// 					'../personal/accountopening?trueName=' +
				// 					that.accountInfo.trueName +
				// 					'&idNo=' +
				// 					that.accountInfo.idNo +
				// 					'&accountNo=' +
				// 					that.accountInfo.bindCardNo +
				// 					'&businessNo=' +
				// 					that.accountInfo.businessNo
				// 			});
				// 	}
				// });
			} else {
				uni.showToast({
					title: '请查看并同意相关协议',
					icon: 'none'
				});
			}
		},
		postOpen() {
			let that = this
			that.wxRequest({
				url: `${that.API}/mini/erLeiHu/openAccount`,
				method: 'POST',
				data: that.accountInfo,
				title: '开户中...',
				success: res => {
					console.log('==============开户成功',res);
					if (res.data.code == 0) {
						uni.navigateTo({
							url:
								'../personal/accountopening?trueName=' +
								that.accountInfo.trueName +
								'&idNo=' +
								that.accountInfo.idNo +
								'&accountNo=' +
								that.accountInfo.bindCardNo +
								'&businessNo=' +
								that.accountInfo.businessNo
						});
					} else {
						uni.showToast({
							title: '开户申请失败，请稍后重试',
							icon: 'none'
						});
					}
						
				},
				complete: (result) => {
					setTimeout(() => {
						uni.hideLoading()
					}, 5000);
				}
			});
		},
		settime() {
			if (this.time == 0) {
			        this.codeText="获取验证码";
			        this.time = 60;
			        return;
			    } else {
			        this.codeText=`${this.time}s后重新发送`;
			        this.time--;
			    }
				setTimeout(() => {
					this.settime()
				}, 1000)
		},
		sendcode() {
			if(this.time != 60){
				return
			}
			if (this.accountInfo.trueName != '' && this.accountInfo.idNo != '' && this.accountInfo.mobileNo != '' && this.accountInfo.bindCardNo != '') {
				var reg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/;
				console.log('ddddddddddddd==', this.accountInfo.mobileNo);
				if (this.accountInfo.mobileNo == '' && this.accountInfo.mobileNo != null) {
					uni.showToast({
						title: '请输入手机号码',
						icon: 'none'
					});
				} else if (!reg.test(this.accountInfo.mobileNo)) {
					uni.showToast({
						title: '手机格式不正确',
						icon: 'none'
					});
				} else {
					this.wxRequest({
						url: `${this.API}/mini/erLeiHu/getVerificationCode`,
						method: 'POST',
						data: this.accountInfo,
						title: '验证码发送中...',
						success: res => {
							this.settime()
							this.accountInfo.businessNo = res.data.data.businessNo;
							this.accountInfo.otpOrderNo = res.data.data.otpOrderNo;
							uni.showToast({
								title: '验证码发送成功',
								icon: 'none'
							});
						}
					});
				}
			} else {
				uni.showToast({
					title: '请完善信息',
					icon: 'none'
				});
			}
		}
	}
};
</script>

<style>
page {
	background: #ffffff;
	font-size: 30rpx;
}

.row-css {
	display: flex;
	flex-direction: row;
}

.column-css {
	display: flex;
	flex-direction: column;
}

.view-centen-text {
	border-bottom: 1rpx solid #f1f1f1;
	padding: 20rpx 10rpx;
	flex: 1;
}

.view-cent {
	padding-left: 15upx;
	flex: 1;
	font-size: 30rpx;
	margin: 0 50rpx;
}

.mini-btn {
	width: 100%;
	background: #2979ff;
	font-size: 28rpx;
	padding: 10rpx 0;
	margin: 0 20rpx;
}

.line-veiw {
	height: 5rpx;
	width: 100%;
	background: #f2f2f2;
}
</style>
